@charset "utf-8";

/*--------------------------------------

	copyright :Lampros co.,Ltd.

	-----------------------------------*/





/* layout

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

body {}



/* body-wrap ----------*/

#body-wrap {position: relative;width: 100%;height: 100vh;overflow: hidden;}

#body-wrap img { max-width: 100%; }

#body-wrap a:link, #body-wrap a:visited {}

@media screen and (max-width:1024px) { /* iPad 横 l */

	#body-wrap { width: 100%; height: auto; overflow: visible; margin-left: 0; margin-top: 6rem; }

}



/* contents-wrap ----------*/

#contents-wrap { position: absolute; top: 0; left: 0; width: inherit; transition: left 0.3s ease-out; }

#contents-wrap .section { position: relative; width: 100%; height: 100vh; overflow: hidden; }

#contents-wrap .inner { position: relative; z-index: 30; }



/* nav ----------*/





/* side_nav ----------*/

#side_nav { position: fixed; z-index: 30; top: 50%; right: -100%; padding-right: 0.1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#side_nav:before, #side_nav:after { position: absolute; right: 0.4rem; content: ""; width: 1px; height: 10rem; opacity: 0.4; }

#side_nav:before { animation: borderAnime 1.5s ease 0s infinite; top: -70%; }

#side_nav:after { animation: borderAnime2 1.5s ease 0.5s infinite; }

@keyframes borderAnime {

	0% { height: 0; top: -70%; }

	24% { top: -70%; }

	25% { height: 60%; top: auto; bottom: 110%; }

	50% { height: 0; top: auto; bottom: 110%; }

	100% { height: 0; top: auto; bottom: 110%; }

}

@keyframes borderAnime2 {

	0% { height: 0; top: 110%; }

	24% { top: 110%; }

	25% { height: 60%; top: auto; bottom: -70%; }

	50% { height: 0; top: auto; bottom: -70%; }

	100% { height: 0; top: auto; bottom: -70%; }

}

#side_nav li {padding: 0.2rem 0;text-align: right;line-height: 1;font-size: 1.4rem;font-weight: bold;}

#side_nav li a { position: relative; text-decoration: none; line-height: 1; }

#side_nav li a .c {display: inline-block;width: 13px;height: 13px;border-radius: 50%;text-decoration: none;text-align: right;transition: all 0.2s ease-out;}

#side_nav li a .n {position: absolute;font-size: 14px;width: 5rem;right: 2rem;font-weight:  normal;opacity: 0;transition: all 0.2s ease-out;color: rgba(255,255,255,0.66);}

#side_nav li a:hover .c, #side_nav li.active a .c {opacity: 1;background: #fff;border:  #fff 2px solid;}

#side_nav li a:hover .n, #side_nav li.active a .n { opacity: 1; }

#side_nav li, #side_nav li a { color: #FFF; }

#side_nav li .c{ border:rgba(255,255,255,0.66) 2px solid;}

#side_nav:before, #side_nav:after { background:#fff}

.nav_black #side_nav li a .n{color: rgba(0,0,0,0.45);}

.nav_black #side_nav li .c{border: rgba(255,255,255,1) 2px solid;background: rgba(0,0,0,0.25);}
.nav_black #side_nav:before, .nav_black #side_nav:after {background-color: #000;}

@media screen and (max-width:1024px) { /* iPad 横 l */

	#side_nav { display: none; }

}



/* pre_nex ----------*/

.pre_nex { position: fixed; z-index: 50; right: 0; padding: 1rem; }

.pre_nex a {position: relative;z-index: 2;display: block;width: 4rem;height: 4rem;border-radius: 50%;color: #FFF;background-color: #1B2C70;text-align: center;text-decoration: none;line-height: 4rem;transition: all 0.2s ease-out;display: none;}

.pre_nex:hover a { opacity: 1; -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }

.pre_nex.wh a { color: #1B2C70; background-color: #FFF; }

.pre_nex a i { line-height: 2; font-size: 1.6rem; }

#pre { top: -100%; }

#nex { bottom: -100%; }

#nex:after {position: absolute;z-index: 1;top: 0;left: 0;content: "";width: 100%;height: 100%;border-radius: 50%;background-color: rgba(204, 204, 204, 0.3);animation: nextAnime 1.5s ease 0s infinite;pointer-events: none;display: none;}

@keyframes nextAnime {

	0% { opacity: 1; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); }

	100% { opacity: 0; -webkit-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); }

}

@media screen and (max-width:1024px) { /* iPad 横 l */

	.pre_nex { display: none; }

}



#lines { position: fixed; z-index: 9999; top: 0; left: 0; transition: left 0.3s ease-out; height: 100vh; pointer-events: none; }

#lines .line { position: absolute; top: 0; width: 1px; height: 0; background-color: rgba(204, 204, 204, 0.20); }

#lines .line1 {left: calc(((100vw) / 6));}

#lines .line2 {left: calc(((100vw / 6) * 2));top: auto;bottom: 0;}

#lines .line3 {left: calc((((100vw) / 6) * 3));}

#lines .line4 {left: calc((((100vw) / 6) * 4));top: auto;bottom: 0;}

#lines .line5 {left: calc((((100vw) / 6) * 5));}

	.nav_open #lines { left: 20rem; }

@media screen and (max-width:1024px) { /* iPad 横 l */

	#lines { width: 100%; }

	#lines .line1 { left: 2rem; }

	#lines .line2 { left: auto; right: 2rem; }

	#lines .line3 { left: 50%; }

	#lines .line4, #lines .line5 { display: none; }

}





@media screen and (max-width:1450px) { /* iPad 横 l */
	.container04 .title{ margin-bottom: 3.75rem !important}
	.container01 .right .ar_article{ margin-bottom:3.125rem !important}
}

@media screen and (max-width:768px) { /* iPad 縦 m */

}

@media screen and (max-width:736px) { /* iPhone 横 ms */

}

@media screen and (max-width:414px) { /* iPhone 縦 s */

}

@media only screen and (orientation:landscape) { /* 横 */

}

@media only screen and (orientation:portrait) { /* 縦 */

}



/* pre_nex ----------*/

.buju {float:left; position: relative;left:28%; z-index: 2; margin-top:4rem; display: block; width:12rem; height:2.8rem; border-radius:50px; color: #FFF; text-align: center; text-decoration: none; line-height:2.8rem; transition: all 0.2s ease-out; background:#e00721;}
.pinzhi {float:right;  position: relative;right:28%; z-index: 2; margin-top:4rem; display: block; width:12rem; height:2.8rem; border-radius:50px; color: #FFF; text-align: center; text-decoration: none; line-height:2.8rem; transition: all 0.2s ease-out; background:#e00721;}

#top-copy:hover a{ opacity: 1; -webkit-transform: scale(1.3, 1.3); transform: scale(1, 1); }
.buju:after { position: absolute; z-index: 1; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius:50px; background-color: rgba(255, 255, 255, 0.3); animation: nextAnime1 1.5s ease 0s infinite; pointer-events: none; }
.pinzhi:after { position: absolute; z-index: 1; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius:50px; background-color: rgba(255, 255, 255, 0.3); animation: nextAnime1 1.5s ease 0s infinite; pointer-events: none; }




@keyframes nextAnime1 {

	0% { opacity: 1; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); }

	100% { opacity: 0; -webkit-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); }

}

@media screen and (max-width:1024px) { /* iPad 横 l */

	.pre_nex { display: none; }

}